{include file="public/head" /}
<title>个人中心</title>
<style>
    #pic{width: 100px;height: 100px;border-radius: 50%;margin: 20px auto;cursor: pointer;}
</style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top wos-header">
    <div class="am-container">
        <h1 class="am-topbar-brand">
            <a href="{:url('index/Index/index')}"><img src="__STATIC__/images/logo.png" alt=""></a>
        </h1>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-warning am-show-sm-only"
        data-am-collapse="{target: '#collapse-head'}">
        <span class="am-sr-only">导航切换</span>
        <span class="am-icon-bars"></span>
        </button>

        <div class="am-collapse am-topbar-collapse" id="collapse-head">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li><a href="{:url('index/Index/index')}">首页</a></li>
                <!--nav仅输出4个部门按钮，多余的放进下拉按钮中-->
                {volist name="nav" id="vo" length="3"}
                <li><a href="{:url('NewsListController/index',array('id'=>$vo['id']))}">{$vo.name}</a></li>
                {/volist}
                <li class="am-dropdown" data-am-dropdown>
                    <a class="am-dropdown-toggle">更多部门<span class="am-icon-caret-down"></span></a>
                    <ul class="am-dropdown-content">
                        {volist name="nav" id="vo" offset="3" }
                        <li><a href="{:url('NewsListController/index',array('id'=>$vo['id']))}">{$vo.name}</a></li>
                        {/volist}
                    </ul>
                </li>
                <li class="am-active"><a href="{:url('index/PersonController/index')}">个人中心</a></li>
            </ul>

            <div class="am-topbar-right" >
                <div class="am-nav am-nav-pills am-topbar-nav">
                    <div class="am-dropdown" data-am-dropdown>
                        <a class="am-btn am-btn-success am-dropdown-toggle" >
                            {$user.name}&nbsp;<span class="am-icon-caret-down"></span>
                        </a>
                        <ul class="am-dropdown-content">
                            <li><a href="{:url('index/PersonController/index')}">个人中心</a></li>
                            <li><a href="{:url('index/PersonController/comment')}">我的评论</a></li>
                            <li><a href="{:url('index/PersonController/collection')}">我的收藏</a></li>
                        </ul>
                        <a class="am-btn am-btn-danger" onclick="loginOut()">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- 个人中心 -->
<div class="am-g" style="margin-top: 20px">
  <div class="am-u-sm-0 am-u-md-2 am-u-lg-2">&nbsp;</div>
  <div class="am-u-sm-12 am-u-md-8 am-u-lg-8">
      <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
        <ul class="am-tabs-nav am-nav am-nav-tabs">
          <li class="am-active"><a href="javascript: void(0)">个人信息</a></li>
          <li><a href="javascript: void(0)">修改头像</a></li>
          <li><a href="javascript: void(0)">修改密码</a></li>
        </ul>
        <div class="am-tabs-bd">
          <div class="am-tab-panel am-active">
              <form class="am-form" action="{:url('index/personController/editPost')}" method="post" id="form">
                  <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                      <div class="am-form-group">
                          <label for="name">姓名</label>
                          <input name="name" id="name" value="{$user.name}" type="text">
                      </div>
                      <div class="am-form-group">
                          <label for="sex">性别</label>
                          <select name="sex" id="sex" >
                              <option hidden>未设置</option>
                              {php}$sexArray = array("1"=>"男","2"=>"女");{/php}
                              {foreach name="sexArray" item="vo"}
                              {php}$selected = $user['sex'] == $key ? "selected" : "";{/php}
                              <option value="{$key}" {$selected}>{$vo}</option>
                              {/foreach}
                          </select>
                      </div>
                      <div class="am-form-group">
                          <label for="dep_id">所属部门</label>
                          <select name="dep_id" id="dep_id"  onchange="updateDep(this);">
                              <option hidden>请选择部门</option>
                              {volist name="depList" id="vo"}
                              {php}$selected = $user['dep_id'] == $vo['id'] ? "selected" : "";{/php}
                              <option value="{$vo.id}" {$selected}>{$vo.name}</option>
                              {/volist}
                          </select>
                      </div>

                      <div class="am-form-group">
                          <label for="job_id">岗位</label>
                          <select name="job_id" id="job_id">
                              <option hidden>请选择岗位</option>
                              {volist name="jobList" id="vo"}
                              {php}$selected = $user['job_id'] == $vo['id'] ? "selected" : "";{/php}
                              <option value="{$vo.id}" {$selected}>{$vo.name}</option>
                              {/volist}
                          </select>
                      </div>
                      <div class="am-form-group">
                          <label for="job_number">工号</label>
                          <input name="job_number" id="job_number" value="{$user['job_number']}" type="text">
                      </div>
                  </div>
                  <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                      <div class="am-form-group">
                          <label for="mobile">手机</label>
                          <input type="tel" name="mobile" id="mobile" value="{$user['mobile']}"/>
                      </div>
                      <div class="am-form-group">
                          <label for="email">邮箱</label>
                          <input type="email" name="email" id="email" value="{$user['email']}" />
                      </div>
                      <div class="am-form-group">
                          <label for="birthday">出生日期</label>
                          <div class="am-input-group am-datepicker-date"
                               data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
                              <label hidden>出生日期</label>
                              <input type="text" name="birthday" id="birthday"
                                     value="{$user['birthday']|date='Y-m-d',###}" readonly/>
                              <span class="am-input-group-btn am-datepicker-add-on">
                              <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
                              </span>
                          </div>
                      </div>
                      <div class="am-form-group">
                          <label for="employ_date">入职时间</label>
                          <div class="am-input-group am-datepicker-date"
                               data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
                              <label hidden>入职时间</label>
                              <input type="text" name="employ_date" id="employ_date"
                                     value="{$user['employ_date']|date='Y-m-d',###}" readonly/>
                              <span class="am-input-group-btn am-datepicker-add-on">
                              <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
                              </span>
                          </div>
                      </div>
                      <div class="am-form-group">
                          <label for="province">户籍地</label>
                          <div class="am-form-inline">
                              <div class="am-form-group">
                                  <select name="province_id" id="province" onchange="provinceChange(this)">
                                      <option hidden> 请选择省份</option>
                                      {volist name="$provinceList" id="vo"}
                                      {php}$selected = $vo['id'] == $user['province_id'] ? "selected" : ""{/php}
                                      <option value="{$vo.id}" {$selected}>{$vo.name}</option>
                                      {/volist}
                                  </select>
                              </div>
                              <div class="am-form-group">
                                  <select name="city_id" id="city" onchange="cityChange(this)">
                                      <option hidden> 请选择城市</option>
                                      {volist name="$cityList" id="vo"}
                                      {php}$selected = $vo['id'] == $user['city_id'] ? "selected" : ""{/php}
                                      <option value="{$vo.id}" {$selected}>{$vo.name}</option>
                                      {/volist}
                                  </select>
                              </div>
                              <div class="am-form-group">
                                  <select name="district_id" id="district">
                                      <option hidden> 请选择区县</option>
                                      {volist name="$districtList" id="vo"}
                                      {php}$selected = $vo['id'] == $user['district_id'] ? "selected" : ""{/php}
                                      <option value="{$vo.id}" {$selected}>{$vo.name}</option>
                                      {/volist}
                                  </select>
                              </div>
                          </div>
                      </div>
                  </div>
                  <input type="hidden" name="id" id="id" value="{$user['id']}">
                  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="text-align: center">
                      <a class="am-btn am-btn-success ajax-submit" style="padding:10px 50px">保存</a>
                      <a href="{:url('index/PersonController/index')}" class="am-btn am-btn-danger" style="padding:10px 50px">重置</a>
                  </div>
              </form>
          </div>
          <div class="am-tab-panel" style="padding: 30px">
              <!--修改头像-->
              {php}$src=$user['avatar']?$user['avatar']:"avatar.png";{/php}
              <label>当前头像:</label><br>
              <img class="am-circle" src="__STATIC__/avatar/{$src}" id="img"  width="140" height="140"/>
              <!--enctype="multipart/form-data"开启文件上传-->
              <form enctype="multipart/form-data">
                <div class="am-form-group am-form-file" style="margin:20px 0">
                    <button type="button" class="am-btn am-btn-danger am-btn-sm" >
                        <i class="am-icon-cloud-upload"></i> 选择要上传的头像</button>
                    <label style="color: red" hidden id="warning">图片大小超过限制！</label>
                    <input id="avatar" type="file" accept="image/png, image/jpeg">
                </div>
                  <a type="submit" class="am-btn am-btn-success" id="submit" onclick="avatarPost()" disabled>确认</a>
                  仅支持jpeg、png格式，且大小不得超过0.5M！
              </form>
          </div>
          <div class="am-tab-panel">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
              <form class="am-form" action="{:url('index/personController/pwdEdit')}" method="post">
               <div class="am-form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username"/>
               </div>
               <div class="am-form-group">
                  <label for="passwordOld">旧密码</label>
                  <input type="password" name="passwordOld" id="passwordOld"/>
               </div>
               <div class="am-form-group">
                  <label for="passwordNew">新密码</label>
                  <input type="password" name="passwordNew" id="passwordNew" placeholder="只能包含数字、字母、_、-；6-12位"/>
               </div>
               <div class="am-form-group">
                   <label for="passwordNewAgain">新密码</label>
                   <input type="password" name="passwordNewAgain" id="passwordNewAgain"/>
               </div>
               <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="text-align: center">
                   <a class="am-btn am-btn-success" onclick="pwdEdit()" style="padding:10px 50px">保存</a>
               </div>
              </form>
            </div>
          </div>
        </div>
      </div>
  </div>
  <div class="am-u-sm-0 am-u-md-2 am-u-lg-2">&nbsp;</div>
</div>
<!-- 个人中心 -->
<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>

{include file="public/footer" /}
</body>
<script>
  //当选择图片input值变化,且大小小于0.5M才能点击确认按钮
  $('#avatar').change(function () {
      //获取当前上传图片
      var imgData = this.files[0];
      //获取图片的大小
      var imgSize = imgData.size;
      //新建一个文件读取对象
      var imgRead = new FileReader();
      //要读取的文件对象
      imgRead.readAsDataURL(imgData);
      //当读取成功时，创建image对象，将读取到的图片信息放入src
      imgRead.onload = function() {
          var aImage = new Image();
          aImage.src = this.result;
          $('#img').attr('src',aImage.src);
      };
      if(imgSize>524288) {
          $('#warning').removeAttr('hidden');
          $('#submit').attr('disabled','true');
      }else{
          $('#warning').attr('hidden','true');
          $('#submit').removeAttr('disabled');
      }
  });
</script>
<script>

    //修改头像ajax
    function avatarPost() {
        var file = $('#avatar')[0].files;
        //将图片信息放入formData，然后再通过ajax传递给PHP
        var avatar = new FormData();
        avatar.append('avatar', file[0]);
        //console.log(avatar);
        $.ajax({
            type: "post",
            dataType: "json",
            data:avatar,
            url: "/index/person_controller/avatarPost",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (result) {
                layer.msg(result.msg,{time:1000});
                //头像修改成功后，将确认按钮变成不可点击状态
                if(result.code===1) $('#submit').attr('disabled','true');
            }
        });
    }
    //修改密码ajax
    function pwdEdit() {
        var username = $("#username").val();
        var passwordOld = $("#passwordOld").val();
        var passwordNew = $("#passwordNew").val();
        var passwordNewAgain = $("#passwordNewAgain").val();
        if (username==='') { layer.msg('用户名不能为空',{time:2000}); return false;}
        if (passwordOld==='') { layer.msg('旧密码不能为空',{time:2000}); return false;}
        if (passwordNew==='') { layer.msg('新密码不能为空',{time:2000}); return false;}
        if (passwordNewAgain==='')  { layer.msg('请再次输入新密码',{time:2000}); return false;}
        $.post("/index/person_controller/pwdEdit",{
            username:username,
            passwordOld:passwordOld,
            passwordNew:passwordNew,
            passwordNewAgain:passwordNewAgain
        },function (result) {
            layer.msg(result.msg,{time:1000});
            if(result.code===1) setTimeout(function(){
                window.location.href=result.url;
            },1500);
        },"json");
    }
    //注销ajax
    function loginOut() {
        $.ajax({
            type: "get",
            dataType: "json",
            url: "/index/login_controller/loginOut",
            success: function (result) {
                layer.msg(result.msg,{time:1000});
                setTimeout(function () {
                    window.location.href=result.url;
                },1500)
            }
        });
    }
</script>
<script src="__STATIC__/js/provinceCity.js"></script>
<script src="__STATIC__/js/ajax-form.js"></script>
<script src="__STATIC__/js/dep-job.js"></script>
</html>